<template>
    <div>
        <!-- 需求是将students数据遍历出来 -->
        <ul>
            <li v-for="item in students" :key="item.id">
                <!-- <router-link :to="{name:'itemdetail',params:{id:item.id}}"> -->
                    <router-link :to="`/itemdetail/${item.id}`">
                    <!-- http://localhost:8000/#/shouye/itemdetail?id=02 -->
                    <img :src="item.img" alt="" width="200px">
                    <p>{{ item.name }}</p>
                </router-link>
            </li>
        </ul>
        <button @click="$router.forward()">testForward</button>
        <button @click="$router.back()">返回</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            students: [
                {
                    id: '01',
                    name: '王佳兴',
                    img: require('../image/55346948feafac1728d7d5398b413a8.jpg')
                },
                {
                    id: '02',
                    name: '丁丹雪',
                    img: require('../image/权少的宝贝.png')
                },
                {
                    id: '03',
                    name: '王姅叮王异忻',
                    img: require('../image/权少.jpg')
                }
            ]
        }
    }
}
</script>

<style lang="scss" scoped>

</style>